<template>
<div class="main">
  <!-- 头部导航栏 -->
  <head-component :noBack="false"  title="修改资料"/>

  <div class="con">
    <div class="list">
      <span class="f32 col_33">头像</span>
      <img class="user_img" @click="uploadImg" :src="userImg" alt="">
    </div>
    <div class="list">
      <span class="f32 col_33">昵称</span>
      <input type="text" v-model="userName"  class="f32 col_33">
    </div>
    <div class="list">
      <span  class="f32 col_33">手机号</span>
      <input type="text" maxlength="11" v-model="userPhone" class="f32 col_33">
    </div>
  </div>

  <div class="global_btn" @click="tijiao">提交</div>
</div>
</template>

<script>
import headComponent from '@/components/layout/head'
export default {
    name: "changePsd.vue",
    components: {
      headComponent
    },
    data(){
      return {
        userImg: require("@/common/image/user_img.png"),
        g_pic1:'',
        userName: '',
        userPhone: ''
      }
    },
    mounted() {
      this.getNews();
    },
    methods: {
      // 初始值
      getNews(){
        let $this = this;
        var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
        let uid = localStorage.getItem('uid');
        let token = localStorage.getItem('token');
        var data = {u_id: uid,token:token};
        $this.$axios.post('/index.php?m=user&c=index',data).then((res) => {
          t.clear();
          if(res.data.code == 1){
            if(res.data.user.m_avatar != ''){ $this.userImg = res.data.user.m_avatar }
            $this.userName = res.data.user.m_name;
            $this.userPhone = res.data.user.m_phone;
          }else{
            $this.$toast({
              message: res.data.msg,
              duration: 800
            })
          }
        })
      },
      uploadImg(){ // 上传头像
        var _  = this;
        var input = document.createElement('input');
        input.type = 'file';
        var _  = this;
        input.onchange = function() {
          var file = this.files[0];
          _.userImg = URL.createObjectURL(file);
          _.g_pic1 = file;
          input = null;
        };
        input.click();
      },
      tijiao(){ // 提交
        let $this = this;
        if(this.userName.length == 0) {
          $this.$toast({
            message: '昵称不能为空',
            duration: 800
          });
        } else if (this.userPhone.length == 0){
          $this.$toast({
            message: '手机号不能为空',
            duration: 800
          });
        } else if (this.userPhone.length != 11){
          $this.$toast({
            message: '手机号格式不正确',
            duration: 800
          });
        } else {
          let uid = localStorage.getItem('uid');
          let token = localStorage.getItem('token');
          let m_avatar = $this.g_pic1 || $this.userImg;
          var data = {u_id:uid, token:token, m_name:$this.userName, m_phone:$this.userPhone, m_avatar:m_avatar};

          var flag = true;
          var formdata = new FormData();
          for(let attr in data) {
            formdata.append(attr,data[attr]);
          }
          if(flag){
            $this.$axios({method:'post', url:'http://www.yykjxxzx.com/index.php?m=user&c=modified_data', data: formdata, headers: {'Content-Type': 'multipart/form-data'},})
              .then(res=> {
                if(res.data.code == 1) {
                  $this.$toast({
                    message: res.data.msg,
                    duration: 800,
                    onClose: ()=>{
                      $this.$router.back();
                    }
                  });
                }
            })
          }
        }


      }
    }
}
</script>

<style scoped  lang="less">
  .con{
    margin: 1.8rem auto 0;width: 90%;
    .list{
      width: 100%;height: 1.3rem;line-height: 1.3rem;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
      margin-bottom:0.533rem; position: relative;border-radius: 0.16rem;
      border-bottom: 0.02rem solid rgba(0, 0, 0, .07);
      .user_img{ width: 0.9rem; height: 0.9rem; border-radius: 50%; }
      span{
        float: left;
        margin-left: 0.4rem;
        width: 2rem;
      }
      input{width: 60%; height:  1.2rem; text-align: right; color: #333;float: left;line-height: 1.3rem;}
      p{position: absolute; right:0.4rem; color: #409aff;}
    }
  }
  .global_btn{width: 90%;margin: 1rem auto 0;}
</style>
